/*
 * @Author: HotSuitor
 * @Date: 2020-03-31 15:16:09
 * @LastEditors: hs
 * @LastEditTime: 2020-03-31 15:24:09
 * @Description: hotsuitor@qq.com
 */
data = [4, 8, 15, 16, 23, 42]
const div = d3.create('div')
div.html('Hello, world!')
const span = d3
  .create('span')
  .style('color', 'white')
  .style('background-color', 'black')
  .html('Hello, world!')
  .node()
document.body.appendChild(div.node())
document.body.appendChild(span)

const table = d3.create('table')
const tbody = table.append('tbody')
tbody
  .append('tr')
  .append('td')
  .text('First!')
tbody
  .append('tr')
  .append('td')
  .text('Second.')
tbody
  .append('tr')
  .append('td')
  .text('Third.')
document.querySelector('body').append(table.node(0))

function drawBar() {
  const div = d3
    .create('div')
    .style('font', '10px sans-serif')
    .style('text-align', 'right')
    .style('color', 'white')

  div
    .selectAll('div')
    .data(data)
    .join('div')
    .style('background', 'steelblue')
    .style('padding', '3px')
    .style('margin', '1px')
    .style('width', d => `${d * 10}px`)
    .text(d => d)

  return div.node()
}
document.querySelector('body').append(drawBar())
